<template>
  <view>
    <view v-for="(item,index) in objects" :key="index" class="object-item ver-layout-center">
      <image v-if="showDelete(item)" class="image-view" :src="item.url"></image>
      <view class="name-view">{{ item.name }}</view>
      <uni-icons v-if="showDelete(item)" class="delete-icon" color="#bbb" size="24" type="close" @click="removeObject(item)"></uni-icons>
    </view>
  </view>
</template>

<script>
import UniIcons from "../../../components/uni-icons/uni-icons";

export default {
  name: "osslist",
  components: {UniIcons},
  data() {
    return {
      objects: []
    }
  },
  created() {
    this.getOssList()
  },
  methods: {
    showDelete(item) {
      return item.name != 'wx-uniapp/'
    },
    getOssList() {
      this.$tools.showLoading()
      uniCloud.callFunction({
        name: 'com-power',
        data: {
          action: 'alioss-objects'
        }
      }).then(res => {
        uni.hideLoading()
        this.objects = res.result.objects
      })
    },
    removeObject(item) {
      uni.showModal({
        title: '提示',
        content: '确认删除该对象吗？',
        cancelText: "取消",
        confirmText: "删除",
        confirmColor: 'red',
        cancelColor: '#000000',
      }).then(res => {
        if (!res[1].confirm) return
        uniCloud.callFunction({
          name: 'com-power',
          data: {
            action: 'alioss-delete',
            object: item.name
          }
        }).then(res => {
          this.$tools.showToast("删除成功！")
          this.getOssList()
        })
      })
    }
  }
}
</script>

<style scoped>
.object-item {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
}

.image-view {
  width: 60px;
  height: 60px;
  background-color: #eaeaea;
}

.name-view {
  font-size: 13px;
}

.delete-icon {
  position: absolute;
  right: 40px;
  top: 29px;
}
</style>
